<template>
  <div class="leader-container">
    <ul>
      <li v-for="(item, index) in list" :key="index" :style="customStyle">
        <p>{{ item.introduce }}</p>
        <img :src="item.avatar" alt="none" />
        <h3>{{ item.name }}</h3>
        <span>{{ item.work }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    bgColor: {
      type: String,
      default: '#fff'
    },
    borderRadius: {
      type: String,
      default: '20px'
    },
    list: {
      type: Array,
      default: function () {
        return [{
          name: '叶志远',
          work: 'CEO',
          avatar: 'https://jmzjkj.com/static/images/yezhiyuan.jpg',
          introduce: '90后创业探索者、崇尚逻辑、追求深入思考、喜欢探索未知、一个难得的人、做着难得的事'
        }, {
          name: '赖柯羽',
          work: 'CTO',
          avatar: 'https://jmzjkj.com/static/images/laikeyu.jpg',
          introduce: '高级架构师、精通JAVA、C++等编程语言、资深移动端开发专家、技术总负责人'
        }, {
          name: '周云韵',
          work: 'COO',
          avatar: 'https://jmzjkj.com/static/images/zhouyunyun.jpg',
          introduce: '公司首席运营、善于制定规范化的工作流程、颜值担当、做事果断细腻、人称客户终结者'
        }]
      }
    }
  },
  computed: {
    customStyle () {
      return {
        background: this.bgColor,
        borderRadius: this.borderRadius
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.leader-container {
  ul {
    display: flex;
    justify-content: space-around;
    li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border: 2px solid rgba(97, 153, 237, 0.26);
      max-width: 250px;
      padding: 40px 30px;
      p {
        font-weight: bold;
        text-align: center;
        min-height: 100px;
      }
      img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: cover;
      }
    }
  }
}
</style>
